/*
* @Author: Choisaaaa
* @Date: 2018/5/5  22:52
* 兄弟组件之间实现通信
*/

import React from  "react";
import ReactDOM from 'react-dom';

//目的：兄弟组件实现通信 Child1 --改变-> Child2
//1.子组件Child1 与父组件Father通信 修改父组件的值
//2.父组件与 子组件Child2 通信 从而修改Child2的数据


class Child1 extends React.Component{
    constructor(props){
        super(props);
    }
    onInputChange(e){
        let newVaue = e.target.value;
        this.props.changeChild2(newVaue);//向父组件的回调函数传递参数
    }
    render(){
        return (
            <div>
                <p> {this.props.name}</p>
                <hr/>
                <p>  以下内容来自于子组件</p>
                <input onClick={(e)=>{this.onInputChange(e)}} />
            </div>
        )
    }
}

class Child2 extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div>
                <p> 我是Child2 {this.props.name}</p>
            </div>
        )
    }
}
class Father extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name : "我是来自于父组件"
        }
    }
    onFatherValueChange(newValue){ //父组件根据回调函数返回的值调用该函数 修改state
        this.setState({
            name : newValue
        });
    }
    render() {
        return (
            <div>
                <Child1 name ={this.state.name} changeChild2={(newValue) =>{this.onFatherValueChange(newValue)}}/>
                <Child2 name={this.state.name}/>
            </div>)
    }
}

ReactDOM.render(
    <div>
        <Father/>
    </div>,
    document.getElementById("Study")
);